<template>
    <div class="login">
        <div class="bar">
            <h1>登录</h1>
            <div class="back" @click="back">
                <i class="iconfont icon-left"></i>
            </div>
        </div>
        <div class="content">
            <div class="pic">
                <img src="@/assets/img/login.png" alt="">
            </div>
            <p>请完成授权以继续使用</p>
            <div class="btn" @click="login">
                <i class="iconfont icon-wechat-fill"></i>
                <span>请完成授权以继续使用</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/module/user';
const router = useRouter()
const userStore = useUserStore()

const login = () => {
    userStore.setLogin(true)
    router.push('/')
}
</script>

<style scoped lang="scss">
.login {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .bar {
        background: #2493F1;
        padding: 30px 15px 20px 15px;
        position: relative;
        text-align: center;
        color: #fff;

        h1 {
            font-size: 17px;
        }

        .back {
            position: absolute;
            left: 15px;
            top: 20px;

            .iconfont {
                font-size: 30px;
            }
        }

    }

    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .pic {
            width: 240px;
            height: 190px;
            margin-top: 100px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        p {
            font-size: 14px;
            color: #333;
            padding: 30px 0;
        }

        .btn {
            width: 260px;
            height: 45px;
            color: #fff;
            background: #2493F1;
            border-radius: 30px;
            font-size: 16px;
            line-height: 45px;
            text-align: center;

            span {
                font-size: 16px;
            }
        }
    }
}
</style>